<template>
    <div class="app-folder-dialog" v-if="visible">
        <div class="flex-between app-dialog-header">
            <p v-if="!edit">
                <span @click="edit=true">{{folderData.name}}</span>
            </p>
            <p v-else @click="handleEdit">
                <el-input
                v-model="folderName" 
                :maxlength="8"
                :min-length="1"
                clearable
                @click.stop="null"
                @keyup.enter="handleEdit"
                placeholder="请输入文件夹名称" 
                style="width:150px">
                </el-input>
            </p>
            
            <el-icon @click="handleClose"><CloseBold /></el-icon>
        </div>
        <div class="app-folder-dialog-body scrollbar" v-if="type===0">
            <ul
            ref="appFolderNode"
            id="app-folder-dialog-box"
            @dragstart="onDragStart"
            @dragover="onDragOver($event, 'appFolderNode')"
            @dragend="onDragEnd($event, 'appFolderNode', folderData)">
                <li 
                draggable="true"
                :data-folder="folderData.id"
                v-for="item in folderData.children" 
                :key="item.name"
                :data-key="item.id"
                @contextmenu.prevent="handleMenu($event, 'appMenuVisible', item)"
                class="app-content flex-column-center">
                    <div class="app-img" @click="handleOpen(item)">
                        <img
                        :style="{backgroundColor:item.background}"
                        :src="CheckFullUrl(item.icon)" 
                        draggable="false"/>
                    </div>
                    <p class="oneline">{{item.name}}</p>
                </li>
            </ul>
        </div>

        <div class="app-folder-dialog-body scrollbar" v-else>
            <ul
            ref="appFolderNode"
            id="app-folder-dialog-box">
                <li 
                draggable="true"
                :data-folder="folderData.id"
                v-for="item in folderData.children" 
                :key="item.name"
                :data-key="item.id"
                @contextmenu.prevent="handleMenu($event, 'appMenuVisible', item)"
                class="app-content flex-column-center">
                    <div class="app-img" @click="handleOpen(item)">
                        <img
                        :style="{backgroundColor:item.background}"
                        :src="CheckFullUrl(item.icon)" 
                        draggable="false"/>
                    </div>
                    <p class="oneline">{{item.name}}</p>
                </li>
            </ul>
        </div>
    </div>
 </template>
 
<script lang='ts'>
import { reactive, toRefs, watch, getCurrentInstance, ref, provide } from 'vue';
import { useAppStore } from '@/store/app';
import useIconDrag from '@/hooks/useIconDrag';
import useCheck from '@/hooks/useCheck';
export default {
    name:'appFolder',
    props: {
        visible:{
            type:Boolean,
            default:false
        },
        folderData:{
            type:Object,
            default:null
        },
        type:{
            type:Number,
            default:0
        }
    },
    components: {
    },
    emits:['close', 'open', 'menu'],
    setup (props, context) 
    {
        const appStore = useAppStore();
        const { proxy }:any = getCurrentInstance();
        let data = reactive({
            folderName:props.folderData.name,
            edit:false
        });
        let methods = {
            handleClose ()
            {
                context.emit('close');
            },
            handleOpen (item)
            {
                context.emit('open', item);
            },
            handleEdit ()
            {
                if (data.folderName === props.folderData.name) return data.edit = false;
                appStore.editFolderName(props.folderData.id, data.folderName);
                data.edit = false;
            },
            handleMenu (e, value, item = null)
            {
                context.emit('menu', e, value, item);
            }
        };
        return { 
            ...toRefs(data),
            ...methods,
            appStore,
            ...useIconDrag(),
            ...useCheck()
        };
    }
};
</script>
 
<style scoped lang="scss">
.app-folder-dialog {
    position: absolute;
    top:10%;
    left: 50%;
    background-color: var(--el-bg-color-folder);
    transform: translate(-50%, 0);
    width: 50%;
    height: 70%;
    padding: 10px 20px;
    border-radius: 10px;
}

.app-dialog-header {
    height: 30px;
    font-size: 16px;
    font-weight: 600;

    p {
        width: 100%;
        text-align: center;
    }

    i {
        font-size: 16px;
        cursor: pointer;

        &:hover {
            color:$PrimaryColor;
        }
    }
}
.app-folder-dialog-body {
    height: calc(100% - 55px);
    max-height:calc(100% - 55px);
    overflow-y: auto;
    margin-top: 15px;
}

#app-folder-dialog-box {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns:repeat(auto-fill,100px);
    grid-template-rows: repeat(auto-fill,100px);
    justify-content: center;
    grid-auto-flow: dense;
}


.app-content {
    margin: 5px 10px;

    .app-img {
        width: 60px;
        height: 60px;
        background-color: $PageBackgroundColor;
        box-shadow: 0 0 5px #0000001a;
        transition: .2s;
        cursor: pointer;
        overflow: hidden;
        border-radius: 10px;

        &:hover {
            transform: scale(1.1);
        }
    }

    p {
        font-size: 14px;
        margin-top: 5px;
    }
}

</style>
 